<script setup>
import { ref,reactive} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const searchDept = reactive({
    name:""
})
const tableData = reactive([
    {
        id:1,
        name:"研发部",
        description: '产品研发...'
    },
     {
        id:2,
        name:"销售部门",
        description: '卖产品...'
    }
])

const handleSelectionChange = (val) => {
  console.log(val)
}

const handleEdit = (index, row) => {
  console.log(index, row)
}
const handleDelete = (index, row) => {

 ElMessageBox.confirm(
    '确认删除?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })


  console.log(index, row)
}

</script>
<template>
    <div class="container">
    <!-- 搜索栏 -->
        <div class="search">
                 <el-form :inline="true" :model="searchDept" class="demo-form-inline">
                    <el-form-item label="名称">
                        <el-input v-model="searchDept.name" placeholder="请输入部门名称" clearable />
                    </el-form-item>
                
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>
        </div>
    <!-- 表格展示数据 -->
        <div class="content">

            <el-table 
                :data="tableData" 
                border 
                 @selection-change="handleSelectionChange"
                style="width: 100%">
                  <el-table-column type="selection" width="55" />
                <el-table-column prop="id" label="编号" width="180" />
                <el-table-column prop="name" label="名称" width="180" />
                <el-table-column prop="description" label="描述" />
                <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
                    >Edit</el-button
                    >
                    <el-button
                    size="small"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)"
                    >Delete</el-button
                    >
                </template>
                </el-table-column>
            </el-table>

        </div>
    <!-- 分页栏-->
        <div class="page">
            <el-pagination background layout="prev, pager, next" :total="1000" />
        </div>
    </div>
</template>
<style lang="css" scoped>

    .container{
        padding: 20px;
    }

    .search{
        border-bottom: 1px solid #ccc;
    }

    .content{
        margin-top:20px;
    }

    .page{
        margin-top: 20px;
    }
</style>